<template>
	<view class="container">
		<!-- 日历视图切换 -->
		<view class="view-switcher">
			<view 
				v-for="(item, index) in viewTypes" 
				:key="index"
				:class="['switcher-item', currentView === item.type ? 'active' : '']"
				@tap="switchView(item.type)"
			>
				{{item.name}}
			</view>
		</view>

		<!-- 日历主体 -->
		<view class="calendar-container">
			<view class="month-header">
				<text class="iconfont" @tap="currentView === 'month' ? changeMonth(-1) : changeWeekOrDay(-1)">◀</text>
				<text class="current-month">
					{{currentYear}}年{{currentMonth + 1}}月
					<text v-if="currentView === 'week'">第{{Math.ceil((selectedDate.getDate() + new Date(currentYear, currentMonth, 1).getDay()) / 7)}}周</text>
					<text v-if="currentView === 'day'">{{selectedDate.getDate()}}日</text>
				</text>
				<text class="iconfont" @tap="currentView === 'month' ? changeMonth(1) : changeWeekOrDay(1)">▶</text>
			</view>
			<view class="weekdays">
				<text v-for="day in weekDays" :key="day">{{day}}</text>
			</view>
			<view :class="['days', currentView === 'day' ? 'day-view' : '']">
				<view 
					v-for="(day, index) in monthDays" 
					:key="index"
					:class="[
						'day-item', 
						day.isCurrentMonth ? '' : 'other-month',
						day.isToday ? 'today' : '',
						day.isPast ? 'past' : '',
						day.fullDate.getTime() === selectedDate.getTime() ? 'selected' : '',
						currentView === 'day' ? 'day-view-item' : ''
					]"
					@tap="selectDate(day)"
				>
					<text>{{day.date}}</text>
					<view v-if="day.hasEvents" class="event-dot"></view>
				</view>
			</view>
		</view>

		<!-- 事件列表 -->
		<view class="events-list">
			<view class="list-header">
				<text>{{formatDate(selectedDate)}} 日程</text>
				<view class="header-actions">
					<button class="add-btn" @tap="showAddTask">添加任务</button>
					<button class="add-btn" @tap="showAddEvent">添加日程</button>
				</view>
			</view>
			<view class="event-items">
				<!-- 日程列表 -->
				<view v-for="(event, index) in todayEvents" :key="'event'+index" class="event-item">
					<view class="event-time">{{event.startTime}} - {{event.endTime}}</view>
					<view class="event-title">{{event.title}}</view>
					<view class="event-actions">
						<text @tap="editEvent(event)">编辑</text>
						<text @tap="deleteEvent(event)">删除</text>
					</view>
				</view>
				
				<!-- 任务列表 -->
				<view v-for="(task, index) in todayTasks" :key="'task'+index" class="task-item">
					<view class="task-header">
						<view class="task-checkbox" @tap="toggleTask(task)">
							<text :class="['checkbox', task.completed ? 'checked' : '']"></text>
						</view>
						<view class="task-content">
							<text :class="['task-title', task.completed ? 'completed' : '']">{{task.title}}</text>
							<text class="task-due-date" v-if="task.dueDate">截止时间：{{task.dueDate}} {{task.dueTime || '23:59'}}</text>
						</view>
						<view class="task-priority" :class="'priority-' + task.priority">
							{{getPriorityText(task.priority)}}
						</view>
					</view>
					<view class="task-footer">
						<view class="task-actions">
							<text @tap="editTask(task)">编辑</text>
							<text @tap="deleteTask(task)">删除</text>
						</view>
					</view>
				</view>

				<view v-if="todayEvents.length === 0 && todayTasks.length === 0" class="no-events">
					<text>暂无日程和任务</text>
				</view>
			</view>
		</view>

		<!-- 添加/编辑事件弹窗 -->
		<uni-popup ref="eventPopup" type="center">
			<view class="popup-content">
				<view class="popup-title">{{isEdit ? '编辑日程' : '添加日程'}}</view>
				<scroll-view scroll-y="true" class="popup-scroll">
					<view class="form-item">
						<input v-model="eventForm.title" placeholder="事件标题" />
					</view>
					<view class="form-item">
						<picker mode="date" :value="eventForm.date" @change="onDateChange">
							<view>日期：{{eventForm.date}}</view>
						</picker>
					</view>
					<view class="form-item">
						<picker mode="time" :value="eventForm.startTime" @change="onStartTimeChange">
							<view>开始时间：{{eventForm.startTime}}</view>
						</picker>
					</view>
					<view class="form-item">
						<picker mode="time" :value="eventForm.endTime" @change="onEndTimeChange">
							<view>结束时间：{{eventForm.endTime}}</view>
						</picker>
					</view>
				</scroll-view>
				<view class="form-actions">
					<button @tap="cancelEvent">取消</button>
					<button @tap="saveEvent" type="primary">保存</button>
				</view>
			</view>
		</uni-popup>
		
		<!-- 添加/编辑任务弹窗 -->
		<uni-popup ref="taskPopup" type="center">
			<view class="popup-content" @click.stop>
				<view class="popup-title">{{isEditTask ? '编辑任务' : '新建任务'}}</view>
				<scroll-view scroll-y="true" class="popup-scroll">
					<view class="form-item">
						<text class="form-label">任务标题</text>
						<input type="text" v-model="taskForm.title" placeholder="请输入任务标题" class="task-input" />
					</view>
					<view class="form-item">
						<text class="form-label">截止日期</text>
						<picker mode="date" 
							:value="taskForm.dueDate" 
							:start="formatDate(new Date())"
							@change="onDueDateChange">
							<view class="picker-view">
								<text>{{taskForm.dueDate || '请选择日期'}}</text>
								<text class="picker-arrow">▼</text>
							</view>
						</picker>
					</view>
					<view class="form-item">
						<text class="form-label">截止时间</text>
						<picker mode="time" 
							:value="taskForm.dueTime || '23:59'" 
							@change="onDueTimeChange">
							<view class="picker-view">
								<text>{{taskForm.dueTime || '23:59'}}</text>
								<text class="picker-arrow">▼</text>
							</view>
						</picker>
					</view>
					<view class="form-item">
						<text class="form-label">优先级</text>
						<picker :range="priorityOptions" :value="taskForm.priority" @change="onPriorityChange">
							<view class="picker-view">
								<text>{{getPriorityTextForValue(taskForm.priority)}}</text>
								<text class="picker-arrow">▼</text>
							</view>
						</picker>
					</view>
					<view class="form-item">
						<text class="form-label">任务描述</text>
						<textarea v-model="taskForm.description" placeholder="请输入任务描述" class="task-textarea"></textarea>
					</view>
				</scroll-view>
				<view class="form-actions">
					<button @tap="cancelTask" class="btn-cancel">取消</button>
					<button @tap="saveTask" type="primary" class="btn-save">保存</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import api from '../../utils/api.js';
	import uniPopup from '@dcloudio/uni-ui/lib/uni-popup/uni-popup.vue';
	import { reminderManager } from '../../utils/reminder.js';

	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				viewTypes: [
					{ type: 'month', name: '月' },
					{ type: 'week', name: '周' },
					{ type: 'day', name: '日' }
				],
				currentView: 'month',
				currentYear: new Date().getFullYear(),
				currentMonth: new Date().getMonth(),
				currentDate: new Date().getDate(),
				selectedDate: new Date(),
				weekDays: ['日', '一', '二', '三', '四', '五', '六'],
				monthDays: [],
				todayEvents: [],
				todayTasks: [],
				eventForm: {
					title: '',
					date: '',
					startTime: '',
					endTime: ''
				},
				isEdit: false,
				currentEditEvent: null,
				showPopup: false,
				// 任务相关数据
				isEditTask: false,
				currentEditTask: null,
				taskForm: {
					title: '',
					description: '',
					dueDate: '',
					dueTime: '23:59',
					priority: 1,
					completed: false,
					subtasks: []
				},
				priorityOptions: ['低', '中', '高']
			}
		},
		computed: {
			// 获取当前选中日期的事件和任务
			selectedDateEvents() {
				const events = uni.getStorageSync('events') || '[]'
				const allEvents = JSON.parse(events)
				const selectedDateStr = this.formatDate(this.selectedDate)
				return allEvents.filter(event => event.date === selectedDateStr)
			},
			
			selectedDateTasks() {
				const tasks = uni.getStorageSync('tasks') || '[]'
				const allTasks = JSON.parse(tasks)
				const selectedDateStr = this.formatDate(this.selectedDate)
				return allTasks.filter(task => task.dueDate === selectedDateStr)
			}
		},
		onLoad() {
			this.initCalendar()
			this.loadEvents()
			this.loadTasks()
		},
		methods: {
			initCalendar() {
				this.selectedDate = new Date()
				if (this.currentView === 'month') {
					this.generateMonthDays()
				} else if (this.currentView === 'week') {
					this.generateWeekDays()
				} else if (this.currentView === 'day') {
					this.generateDayView()
				}
			},
			generateMonthDays() {
				const days = []
				const firstDay = new Date(this.currentYear, this.currentMonth, 1)
				const lastDay = new Date(this.currentYear, this.currentMonth + 1, 0)
				
				// 填充上个月的日期
				const firstDayWeek = firstDay.getDay()
				for (let i = firstDayWeek - 1; i >= 0; i--) {
					const date = new Date(firstDay)
					date.setDate(date.getDate() - i - 1)
					days.push({
						date: date.getDate(),
						fullDate: new Date(date),
						isCurrentMonth: false,
						hasEvents: this.checkHasEvents(date),
						isPast: date < new Date().setHours(0, 0, 0, 0),
						isToday: this.isToday(date)
					})
				}
				
				// 填充当前月的日期
				for (let i = 1; i <= lastDay.getDate(); i++) {
					const date = new Date(this.currentYear, this.currentMonth, i)
					days.push({
						date: i,
						fullDate: new Date(date),
						isCurrentMonth: true,
						hasEvents: this.checkHasEvents(date),
						isPast: date < new Date().setHours(0, 0, 0, 0),
						isToday: this.isToday(date)
					})
				}
				
				this.monthDays = days
			},
			generateWeekDays() {
				const days = []
				const weekStart = new Date(this.selectedDate)
				weekStart.setDate(weekStart.getDate() - weekStart.getDay()) // 设置到本周日
				
				// 生成一周的日期
				for (let i = 0; i < 7; i++) {
					const date = new Date(weekStart)
					date.setDate(date.getDate() + i)
					days.push({
						date: date.getDate(),
						fullDate: new Date(date),
						isCurrentMonth: date.getMonth() === this.currentMonth,
						hasEvents: this.checkHasEvents(date),
						isPast: date < new Date().setHours(0, 0, 0, 0),
						isToday: this.isToday(date)
					})
				}
				
				this.monthDays = days
			},
			generateDayView() {
				const days = []
				const currentDate = new Date(this.selectedDate)
				days.push({
					date: currentDate.getDate(),
					fullDate: new Date(currentDate),
					isCurrentMonth: true,
					hasEvents: this.checkHasEvents(currentDate),
					isPast: currentDate < new Date().setHours(0, 0, 0, 0),
					isToday: this.isToday(currentDate)
				})
				this.monthDays = days
			},
			checkHasEvents(date) {
				const events = uni.getStorageSync('events') || '[]'
				const allEvents = JSON.parse(events)
				const dateStr = this.formatDate(date)
				return allEvents.some(event => event.date === dateStr)
			},
			isToday(date) {
				const today = new Date()
				return date.getDate() === today.getDate() &&
					date.getMonth() === today.getMonth() &&
					date.getFullYear() === today.getFullYear()
			},
			switchView(type) {
				this.currentView = type
				if (type === 'month') {
					this.generateMonthDays()
				} else if (type === 'week') {
					this.generateWeekDays()
				} else if (type === 'day') {
					this.generateDayView()
				}
			},
			changeMonth(offset) {
				const newDate = new Date(this.currentYear, this.currentMonth + offset, 1)
				this.currentYear = newDate.getFullYear()
				this.currentMonth = newDate.getMonth()
				
				if (this.currentView === 'month') {
					this.generateMonthDays()
				} else if (this.currentView === 'week') {
					this.selectedDate = newDate
					this.generateWeekDays()
				} else if (this.currentView === 'day') {
					this.selectedDate = newDate
					this.generateDayView()
				}
				this.loadEvents()
			},
			changeWeekOrDay(offset) {
				const newDate = new Date(this.selectedDate)
				newDate.setDate(this.selectedDate.getDate() + offset)
				this.selectedDate = newDate
				this.loadEvents()
			},
			selectDate(day) {
				if (day.isPast) {
					uni.showToast({
						title: '不能选择过去的日期',
						icon: 'none'
					})
					return
				}
				
				this.selectedDate = new Date(day.fullDate)
				this.loadEvents()
			},
			showAddEvent() {
				this.isEdit = false;
				this.resetEventForm();
				this.showPopup = true;
				this.$refs.eventPopup.open();
			},
			editEvent(event) {
				this.isEdit = true;
				this.currentEditEvent = event;
				this.eventForm = { ...event };
				this.showPopup = true;
				this.$refs.eventPopup.open();
			},
			deleteEvent(event) {
				uni.showModal({
					title: '确认删除',
					content: '是否确认删除该日程？',
					success: (res) => {
						if (res.confirm) {
							api.deleteEvent(event.id)
								.then(response => {
									if (response.code === 200) {
										uni.showToast({
											title: '删除成功',
											icon: 'success'
										})
										
										// 删除对应的提醒
										reminderManager.removeReminder(event.id, 'event')
										
										// 刷新日历和事件列表
										this.loadEvents()
									}
								})
								.catch(error => {
									console.error('删除日程失败:', error)
									uni.showToast({
										title: '删除失败',
										icon: 'none'
									})
								})
						}
					}
				})
			},
			saveEvent() {
				if (!this.eventForm.title) {
					uni.showToast({
						title: '请输入日程标题',
						icon: 'none'
					})
					return
				}
				
				const eventData = {
					title: this.eventForm.title,
					date: this.eventForm.date,
					startTime: this.eventForm.startTime,
					endTime: this.eventForm.endTime,
					description: ''
				}
				
				if (this.isEdit && this.currentEditEvent) {
					api.updateEvent(this.currentEditEvent.id, eventData)
						.then(response => {
							if (response.code === 200) {
								this.handleSaveSuccess(response.data, '更新')
								// 更新提醒
								reminderManager.updateEventReminder(response.data)
							}
						})
						.catch(error => {
							this.handleSaveError(error)
						})
				} else {
					api.createEvent(eventData)
						.then(response => {
							if (response.code === 200) {
								this.handleSaveSuccess(response.data, '创建')
								// 添加提醒
								reminderManager.addEventReminder(response.data)
							}
						})
						.catch(error => {
							this.handleSaveError(error)
						})
				}
			},
			handleSaveSuccess(event, action) {
				// 显示保存成功提示
				uni.showToast({
					title: `${action}日程成功`,
					icon: 'success'
				});
				
				// 刷新数据
				this.loadEvents();
				
				// 关闭弹窗
				this.showPopup = false;
				this.$refs.eventPopup.close();
			},
			handleSaveError(error) {
				console.error('保存事件失败:', error);
				uni.showToast({
					title: '保存失败',
					icon: 'none'
				});
			},
			cancelEvent() {
				this.showPopup = false;
				this.$refs.eventPopup.close();
			},
			resetEventForm() {
				this.eventForm = {
					title: '',
					date: this.formatDate(new Date()),
					startTime: '08:00',
					endTime: '09:00'
				}
			},
			loadEvents() {
				api.getEvents(
					this.formatDate(new Date(this.currentYear, this.currentMonth, 1)),
					this.formatDate(new Date(this.currentYear, this.currentMonth + 1, 0))
				)
					.then(response => {
						if (response.code === 200) {
							// 保存到本地存储
							uni.setStorageSync('events', JSON.stringify(response.data))
							// 刷新日历和今天的事件
							this.updateCalendarEvents()
							this.loadTodayEvents()
						}
					})
					.catch(error => {
						console.error('加载日程失败:', error)
					})
			},
			formatDate(date) {
				const year = date.getFullYear()
				const month = (date.getMonth() + 1).toString().padStart(2, '0')
				const day = date.getDate().toString().padStart(2, '0')
				return `${year}-${month}-${day}`
			},
			onDateChange(e) {
				const date = new Date(e.detail.value)
				this.eventForm.date = this.formatDate(date)
			},
			onStartTimeChange(e) {
				const time = e.detail.value
				this.eventForm.startTime = time
			},
			onEndTimeChange(e) {
				const time = e.detail.value
				this.eventForm.endTime = time
			},
			toggleTask(task) {
				// 更新任务状态
				task.completed = !task.completed
				
				// 调用API更新任务
				api.toggleTask(task.id)
					.then(response => {
						if (response.code === 200) {
							uni.showToast({
								title: task.completed ? '已完成' : '已取消完成',
								icon: 'success'
							})
							
							// 更新提醒 (如果任务完成，则删除提醒)
							if (task.completed) {
								reminderManager.removeReminder(task.id, 'task')
							} else {
								reminderManager.addTaskReminder(task)
							}
						}
					})
					.catch(error => {
						console.error('更新任务状态失败:', error)
						uni.showToast({
							title: '操作失败',
							icon: 'none'
						})
						task.completed = !task.completed // 恢复状态
					})
			},
			getPriorityText(priority) {
				switch (priority) {
					case 0:
						return '低'
					case 1:
						return '中'
					case 2:
						return '高'
					default:
						return '中'
				}
			},
			loadTasks() {
				// 获取当前选中日期
				const selectedDate = this.formatDate(this.selectedDate)
				
				// 从API获取任务
				api.getTasksByDate(selectedDate)
					.then(response => {
						if (response.code === 200) {
							// 处理当天任务
							this.todayTasks = response.data || []
						}
					})
					.catch(error => {
						console.error('加载任务失败:', error)
					})
			},
			updateCalendarEvents() {
				// 重新生成日历视图以更新事件标记
				if (this.currentView === 'month') {
					this.generateMonthDays()
				} else if (this.currentView === 'week') {
					this.generateWeekDays()
				} else if (this.currentView === 'day') {
					this.generateDayView()
				}
			},
			loadTodayEvents() {
				// 获取当前选中日期格式化后的字符串
				const selectedDateStr = this.formatDate(this.selectedDate)
				// 从本地存储获取所有事件
				const events = uni.getStorageSync('events') || '[]'
				const allEvents = JSON.parse(events)
				// 过滤出今天的事件
				this.todayEvents = allEvents.filter(event => event.date === selectedDateStr)
				
				// 同时加载任务
				this.loadTasks()
			},
			// 任务相关方法
			showAddTask() {
				this.isEditTask = false;
				this.resetTaskForm();
				this.taskForm.dueDate = this.formatDate(this.selectedDate);
				this.$refs.taskPopup.open();
			},
			
			editTask(task) {
				this.isEditTask = true;
				this.currentEditTask = task;
				this.taskForm = {
					title: task.title || '',
					description: task.description || '',
					dueDate: task.dueDate || '',
					dueTime: task.dueTime || '23:59',
					priority: task.priority !== undefined ? task.priority : 1,
					completed: task.completed || false,
					subtasks: [...(task.subtasks || [])]
				}
				this.$refs.taskPopup.open();
				
				// 确保数据绑定正确初始化
				this.$nextTick(() => {
					this.taskForm = { ...this.taskForm }
				})
			},
			
			deleteTask(task) {
				uni.showModal({
					title: '确认删除',
					content: '是否确认删除该任务？',
					success: (res) => {
						if (res.confirm) {
							api.deleteTask(task.id)
								.then(response => {
									if (response.code === 200) {
										uni.showToast({
											title: '删除成功',
											icon: 'success'
										})
										
										// 删除对应的提醒
										reminderManager.removeReminder(task.id, 'task_early');
										reminderManager.removeReminder(task.id, 'task_final');
										
										// 重新加载任务
										this.loadTasks();
									}
								})
								.catch(error => {
									console.error('删除任务失败:', error)
									uni.showToast({
										title: '删除失败',
										icon: 'none'
									})
								})
						}
					}
				})
			},
			
			saveTask() {
				if (!this.taskForm.title) {
					uni.showToast({
						title: '请输入任务标题',
						icon: 'none'
					})
					return
				}
				
				const taskData = {
					...this.taskForm,
					categoryId: "1" // 默认使用第一个分类
				}
				
				if (this.isEditTask) {
					api.updateTask(this.currentEditTask.id, taskData)
						.then(response => {
							if (response.code === 200) {
								this.handleTaskSaveSuccess()
								// 更新任务提醒
								if (response.data.completed) {
									reminderManager.removeReminder(response.data.id, 'task_early');
									reminderManager.removeReminder(response.data.id, 'task_final');
								} else {
									reminderManager.updateTaskReminder(response.data)
								}
							}
						})
						.catch(error => {
							this.handleTaskSaveError(error)
						})
				} else {
					api.createTask(taskData)
						.then(response => {
							if (response.code === 200) {
								this.handleTaskSaveSuccess()
								// 添加任务提醒
								reminderManager.addTaskReminder(response.data)
							}
						})
						.catch(error => {
							this.handleTaskSaveError(error)
						})
				}
			},
			
			handleTaskSaveSuccess() {
				uni.showToast({
					title: '保存成功',
					icon: 'success'
				})
				
				// 重新加载任务
				this.loadTasks()
				
				// 关闭弹窗
				this.$refs.taskPopup.close()
			},
			
			handleTaskSaveError(error) {
				console.error('保存任务失败:', error)
				uni.showToast({
					title: '保存失败',
					icon: 'none'
				})
			},
			
			cancelTask() {
				this.$refs.taskPopup.close()
			},
			
			resetTaskForm() {
				this.taskForm = {
					title: '',
					description: '',
					dueDate: this.formatDate(this.selectedDate),
					dueTime: '23:59',
					priority: 1,
					completed: false,
					subtasks: []
				}
			},
			
			onDueDateChange(e) {
				const selectedDate = new Date(e.detail.value)
				const today = new Date()
				today.setHours(0, 0, 0, 0)
				
				if (selectedDate < today) {
					uni.showToast({
						title: '不能选择过去的日期',
						icon: 'none'
					})
					return
				}
				
				this.taskForm.dueDate = e.detail.value
			},
			
			onDueTimeChange(e) {
				this.taskForm.dueTime = e.detail.value
			},
			
			onPriorityChange(e) {
				this.taskForm.priority = parseInt(e.detail.value)
			},
			
			getPriorityTextForValue(priority) {
				return this.priorityOptions[priority] || '中'
			}
		}
	}
</script>

<style>
	.container {
		flex: 1;
		display: flex;
		flex-direction: column;
		padding: 20rpx;
	}

	.view-switcher {
		display: flex;
		justify-content: center;
		margin-bottom: 20rpx;
	}

	.switcher-item {
		padding: 10rpx 30rpx;
		margin: 0 10rpx;
		border: 1px solid #ddd;
		border-radius: 30rpx;
	}

	.switcher-item.active {
		background-color: #007AFF;
		color: #fff;
		border-color: #007AFF;
	}

	.calendar-container {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
	}

	.month-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
	}

	.weekdays {
		display: flex;
		justify-content: space-around;
		padding: 20rpx 0;
		border-bottom: 1px solid #eee;
	}

	.days {
		display: flex;
		flex-wrap: wrap;
		padding: 10rpx 0;
	}

	.day-item {
		width: 14.28%;
		height: 80rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.day-item.today {
		background-color: #007AFF;
		color: #fff;
		border-radius: 50%;
	}

	.day-item.past {
		color: #ccc;
		background-color: #f5f5f5;
	}

	.day-item.selected {
		border: 2px solid #007AFF;
		border-radius: 50%;
	}

	.other-month {
		color: #ccc;
	}

	.event-dot {
		width: 8rpx;
		height: 8rpx;
		background-color: #007AFF;
		border-radius: 50%;
		position: absolute;
		bottom: 10rpx;
	}

	.events-list {
		flex: 1;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
	}

	.list-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}
	
	.header-actions {
		display: flex;
		gap: 10rpx;
	}

	.add-btn {
		font-size: 28rpx;
		padding: 10rpx 30rpx;
		background-color: #007AFF;
		color: #fff;
		border-radius: 30rpx;
	}

	.event-items {
		display: flex;
		flex-direction: column;
	}

	.event-item {
		padding: 20rpx;
		border-bottom: 1px solid #eee;
	}

	.event-time {
		font-size: 24rpx;
		color: #666;
	}

	.event-title {
		font-size: 28rpx;
		margin: 10rpx 0;
	}

	.event-actions {
		display: flex;
		justify-content: flex-end;
		font-size: 24rpx;
		color: #007AFF;
	}

	.event-actions text {
		margin-left: 20rpx;
	}

	.task-item {
		padding: 20rpx;
		border-bottom: 1px solid #eee;
	}

	.task-header {
		display: flex;
		align-items: center;
	}

	.task-checkbox {
		margin-right: 10rpx;
	}
	
	.checkbox {
		display: inline-block;
		width: 40rpx;
		height: 40rpx;
		border: 2px solid #ddd;
		border-radius: 50%;
		position: relative;
	}

	.checkbox.checked::after {
		content: '✓';
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: #007AFF;
	}

	.task-content {
		flex: 1;
	}

	.task-title {
		font-size: 28rpx;
	}
	
	.task-title.completed {
		text-decoration: line-through;
		color: #999;
	}

	.task-due-date {
		font-size: 24rpx;
		color: #666;
	}

	.task-priority {
		padding: 5rpx 10rpx;
		border-radius: 5rpx;
		font-size: 24rpx;
	}

	.priority-0 {
		background-color: #e8f5e9;
		color: #4caf50;
	}

	.priority-1 {
		background-color: #fff3e0;
		color: #ff9800;
	}

	.priority-2 {
		background-color: #ffebee;
		color: #f44336;
	}

	.task-footer {
		display: flex;
		justify-content: flex-end;
		margin-top: 10rpx;
	}
	
	.task-actions {
		display: flex;
		gap: 20rpx;
	}
	
	.task-actions text {
		color: #007AFF;
		font-size: 24rpx;
	}

	.popup-content {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		width: 600rpx;
		max-height: 80vh;
		display: flex;
		flex-direction: column;
	}
	
	.popup-scroll {
		flex: 1;
		max-height: 60vh;
		margin-bottom: 20rpx;
	}

	.popup-title {
		text-align: center;
		font-size: 32rpx;
		margin-bottom: 30rpx;
	}

	.form-item {
		margin-bottom: 20rpx;
	}

	.form-item input {
		border: 1px solid #eee;
		padding: 10rpx;
		border-radius: 10rpx;
	}
	
	.form-label {
		display: block;
		font-size: 28rpx;
		margin-bottom: 15rpx;
		color: #333;
	}
	
	.task-input {
		height: 88rpx;
		padding: 0 20rpx;
		border: 1px solid #eee;
		border-radius: 8rpx;
		font-size: 28rpx;
		width: 100%;
		box-sizing: border-box;
	}
	
	.task-textarea {
		width: 100%;
		height: 200rpx;
		padding: 20rpx;
		font-size: 28rpx;
		border: 1px solid #eee;
		border-radius: 8rpx;
		box-sizing: border-box;
	}
	
	.picker-view {
		height: 88rpx;
		padding: 0 20rpx;
		border: 1px solid #eee;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;
	}
	
	.picker-arrow {
		font-size: 24rpx;
		color: #666;
	}

	.form-actions {
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
	}

	.form-actions button {
		margin: 0;
		width: 45%;
	}
	
	.btn-cancel {
		background-color: #f5f5f5;
		color: #666;
	}

	.btn-save {
		background-color: #007AFF;
		color: #fff;
	}

	.day-view {
		flex-direction: column;
		height: auto;
	}

	.day-view-item {
		width: 100%;
		height: 120rpx;
		margin: 10rpx 0;
		border-radius: 10rpx;
		background-color: #f8f9fa;
	}

	.current-month {
		display: flex;
		align-items: center;
		font-size: 32rpx;
	}

	.current-month text {
		margin-left: 10rpx;
		font-size: 28rpx;
		color: #666;
	}
	
	.no-events {
		padding: 30rpx;
		text-align: center;
		color: #999;
	}
</style>
